<template>
  <view class="main">
    <view class="tgCard">
      <view class="header">
        <view class="left">
          <image class="headImg" :src="userInfo.avatar" mode="scaleToFill" />
          <view>{{ userInfo.nickName }}</view>
        </view>
        <view class="right">邀请码 {{ userInfo.invitationCode }}</view>
      </view>
      <view class="ctn">
        <view>
          <view class="num">{{ teamList?.count }}</view>
          <view class="label">累计推广(人)</view>
        </view>
        <view>
          <view class="num">{{ teamList?.balance }}</view>
          <view class="label">累计收益(元)</view>
        </view>
      </view>
    </view>
    <view class="commonBox">
      <CommonTitle title="我邀请的" />
      <template v-if="teamList?.list && teamList?.list.length > 0">
        <view>
          <view class="titleRight">奖励（元）</view>
          <view class="detail_box">
            <u-cell-group :border="false">
              <u-cell
                v-for="(item, index) in teamList?.list"
                size="large"
                :key="index"
                :title="item.nickName"
                :value="item.generateProfit + ''"
                titleStyle="color: #1E1E1E;font-size: 28rpx;line-height: 40rpx;"
                :label="dayjs(item.createTime).format('YYYY-MM-DD')"
                :border="false"
              >
                <template #icon>
                  <image v-if="item?.avatar" class="img" :src="item?.avatar" />
                </template>
              </u-cell>
            </u-cell-group>
          </view>
        </view>
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>
    <view class="buttomBox">
      <u-button color="#1676fc" shape="circle" @click="goPage('/pages/myPage/InviteFriends')">立即邀请</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonTitle from "../../components/commonTitle.vue";
import dayjs from "dayjs";
import { goPage } from "../../utils/commonFn";
import { userTeamList } from "../../api/my";
const teamList = ref<myTypes.TeamData>();
const userInfo = uni.getStorageSync("userInfo");
onMounted(async () => {
  const res = await userTeamList();
  teamList.value = res.data;
});
</script>

<style lang="less" scoped>
.tgCard {
  background: url("../../static/my/tgbg.png") no-repeat;
  background-size: 100%;
  border-radius: 32rpx;
  padding: 40rpx 48rpx;
  margin-bottom: 20rpx;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
      .headImg {
        width: 64rpx;
        height: 64rpx;
        margin-right: 18rpx;
      }
    }
    .right {
      font-size: 32rpx;
      color: #ffffff;
      line-height: 44rpx;
    }
  }
  .ctn {
    display: flex;
    justify-content: space-between;
    margin-top: 52rpx;
    text-align: center;
    padding: 20rpx 10rpx;
    .num {
      font-size: 56rpx;
      font-family: DINPro, DINPro;
      font-weight: bold;
      color: #ffffff;
      line-height: 72rpx;
      margin-bottom: 14rpx;
    }
    .label {
      font-size: 26rpx;
      color: #ffffff;
      line-height: 36rpx;
    }
  }
}
.titleRight {
  text-align: right;
  font-size: 22rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #bebebe;
  line-height: 32rpx;
}
/deep/ .u-cell__body {
  padding: 0rpx !important;
  padding-bottom: 32rpx !important;
}
.detail_box {
  background: #fff;
  border-radius: 16rpx;

  /deep/ .u-cell__label {
    font-size: 26rpx;
    font-family: DINPro-Regular, DINPro;
    color: #bebebe;
  }
  /deep/ .u-cell__value {
    font-size: 30rpx;
    font-family: DINPro-Medium, DINPro;
    font-weight: 500;
    color: #333333;
  }
}

.img {
  width: 80rpx;
  height: 80rpx;
  margin-right: 32rpx;
}
</style>
